{% extends 'base.html' %}

{% block title %}考勤记录{% endblock %}

{% block content %}
    <span class="mb-6">
        {{classname}}
        {{date}}
        考勤记录
    </span>
    <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item {% if request.GET.prev|default:'0' == '-6' %}active{% endif %}"><a class="page-link" href="?prev=-6">前六天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '-5' %}active{% endif %}"><a class="page-link" href="?prev=-5">前五天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '-4' %}active{% endif %}"><a class="page-link" href="?prev=-4">前四天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '-3' %}active{% endif %}"><a class="page-link" href="?prev=-3">前三天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '-2' %}active{% endif %}"><a class="page-link" href="?prev=-2">前二天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '-1' %}active{% endif %}"><a class="page-link" href="?prev=-1">前一天</a></li>
        <li class="page-item {% if request.GET.prev|default:'0' == '0' %}active{% endif %}"><a class="page-link" href="?prev=0">今日</a></li>
        
    </ul>
    </nav>


    {% if attendance_records %}
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>学生</th>
                        <th>上午</th>
                        <th>下午</th>
                        <th>晚自习</th>
                        <th>清洁任务完成</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in attendance_records %}
                        <tr>
                            <td>{{ record.student }}
                                <input type="text" value="{{record.student.id}}" hidden="hidden" />
                            </td>
                            <td><input type="checkbox" value="morning_attendance" {% if record.morning_attendance %}checked{% endif %} ></td>
                            <td><input type="checkbox" value="afternoon_attendance" {% if record.afternoon_attendance %}checked{% endif %} ></td>
                            <td><input type="checkbox" value="evening_attendance" {% if record.evening_attendance %}checked{% endif %} ></td>
                            <td>
                                <input type="checkbox" value="cleaning_task_completed" {% if record.cleaning_task_completed %}checked{% endif %} >
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="alert alert-info">暂无考勤记录。</div>
    {% endif %}
    <script>
        $(document).ready(function() {
            $('input[type="checkbox"]').on('click', function() {
               //选择同一个tr下的input=text的值
               var student_id=$(this).parent().parent().find('input[type="text"]').attr('value');
               var attendance_type=$(this).val();
               var attendance_status=$(this).prop('checked')
               $.ajax({
                    url:'{% url 'core:update_attendance_records' %}',
                    type:'POST',
                    data:{
                        'student_id':student_id,
                        'attendance_date':'{{date}}',
                        'attendance_type':attendance_type,
                        'attendance_status':attendance_status
                    }
               });
            });
        });
    </script>
{% endblock %}